﻿@using WebApp.Controllers
@using WebApp.Extensions
@model Dto.ApiResponses.AccountResponses.AccountDetailResponse
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.AccountShowPageSetting;
}

@{ var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Account_Show_" + Model.Detail.Id; }

@section Scripts{
    <script type="text/javascript">
        require(['Account/Show', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

@section QuickLinks{
    <a class="btn btn-primary btn-lg" href="@(Url.Action<AccountController>(x => x.Edit(Guid.Empty), new { id = Model.Detail.Id }))">Edit</a>
    <!-- Button trigger modal -->
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">General Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Photo</label>
                            <div>
                                <canvas id="imgCanvas" width="150" height="187"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Name</label>
                            <div class="text-info" data-bind="text : name"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Type</label>
                            <div class="text-info" data-bind="text : type"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Industry</label>
                            <div class="text-info" data-bind="text : industry"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6">
                    <legend class="h3">Contact Detail</legend>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Account Number</label>
                                <div class="text-info" data-bind="text : accountNumber"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Phone</label>
                                <div class="text-info" data-bind="text : phone"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Mobile</label>
                                <div class="text-info" data-bind="text : mobile"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Email</label>
                                <div class="text-info" data-bind="text : email"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Website</label>
                                <div class="text-info" data-bind="text : website"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Fax</label>
                                <div class="text-info" data-bind="text : fax"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6">
                    <legend class="h3">Billing Detail</legend>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Billing Street</label>
                                <div class="text-info" data-bind="text : billingStreet"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Billing City</label>
                                <div class="text-info" data-bind="text : billingCity"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Billing State</label>
                                <div class="text-info" data-bind="text : billingState"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Billing PosatalCode</label>
                                <div class="text-info" data-bind="text : billingPostalCode"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Billing Country</label>
                                <div class="text-info" data-bind="text : billingCountry"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6">
                    <legend class="h3">Shipping Detail</legend>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Shipping Street</label>
                                <div class="text-info" data-bind="text : shippingStreet"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Shipping City</label>
                                <div class="text-info" data-bind="text : shippingCity"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Shipping State</label>
                                <div class="text-info" data-bind="text : shippingState"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Shipping PosatalCode</label>
                                <div class="text-info" data-bind="text : shippingPostalCode"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Shipping Country</label>
                                <div class="text-info" data-bind="text : shippingCountry"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6">
                    <legend class="h3">Other Detail</legend>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>Description</label>
                                <div class="text-info" data-bind="text : description"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="h3">
                    Folders<div class="pull-right">
                        <button type='button' class='btn btn-primary' data-bind='click:addFolder'><i class="icon icon-plus"></i></button>
                    </div>
                </div>
            </div>
            <div data-bind="visible : folders().length>0" style="background: white; display: none;">
                <div class="row">
                    <div style="overflow: auto">
                        <table class="table table-bordered table-hover table-condensed">
                            <thead>
                                <tr>
                                    <th class="btn btn-primary col-md-1" style="text-align: center">Name</th>
                                    <th class="btn btn-primary col-md-1" style="text-align: center">Tags</th>
                                    <th class="btn btn-primary col-md-1" style="text-align: center">Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- ko foreach: folders -->
                                <tr>
                                    <td style="text-align: center" class="col-xs-2"><a href="#" data-bind="text: name, attr:{'href':'/folder/show?Id=' + id()}"></a></td>
                                    <td style="text-align: center" class="col-xs-2"><span data-bind="text: tags"></span>
                                    <td style="text-align: center" class="col-xs-1"><button class="btn btn-primary" data-bind="click:$root.deleteFolderRecord"><i class="icon icon-trash-o"></i></button></td>
                                </tr>
                                <!-- /ko -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div data-bind="visible: folders().length == 0" class="row" style="margin-left:0">
                <span>No Records found.</span>
            </div>
        </div>
    </section>
    @if (!Request.IsAjaxRequest())
    {
        Html.RenderPartial("_ShowWithAudit", Model);
    }
</div>
